<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列的嵌套</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>  
<style>
		/*下面可以自己修改*/
[class *= col-]{
  background-color: #eee;
  border: 1px solid #ccc;
}
[class *= col-] [class *= col-] {
  background-color: #f36;
  border:1px dashed #fff;
  color: #fff;
}
	</style>
<body>
<!--
注意 类属性所代表的是百分比,而非固定大小
-->
<div class="container">
  <div class="row">
    <div class="col-md-8">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-6">col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-8">col-md-8</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
    <div class="col-md-4">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-9">col-md-9</div>
        <div class="col-md-3">col-md-3</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>